<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link
            rel="stylesheet"
            href="https://cdn.jsdelivr.net/npm/mdui@1.0.0/dist/css/mdui.min.css"
            integrity="sha384-2PJ2u4NYg6jCNNpv3i1hK9AoAqODy6CdiC+gYiL2DVx+ku5wzJMFNdE3RoWfBIRP"
            crossorigin="anonymous"
    />


    <script
            src="https://cdn.jsdelivr.net/npm/mdui@1.0.0/dist/js/mdui.min.js"
            integrity="sha384-aB8rnkAu/GBsQ1q6dwTySnlrrbhqDwrDnpVHR2Wgm8pWLbwUnzDcIROX3VvCbaK+"
            crossorigin="anonymous"
    ></script>
    <style>
        main{
            columns: auto 200px;
            margin: 10px;
        }
        main>div{
            break-inside: avoid; /*avoid splitting.*/
        }
        main>div+div{
            margin-top: 10px;
        }
    </style>
</head>
<body class="mdui-appbar-with-toolbar">
<!--<div class="mdui-appbar mdui-appbar-fixed mdui-appbar-scroll-hide">-->
<div class="mdui-appbar mdui-appbar-fixed">
    <div class="mdui-theme-primary-indigo mdui-theme-accent-pink ">
            <div class="mdui-tab mdui-color-theme" mdui-tab>
                    <a href="#example7-tab1" class="mdui-ripple mdui-ripple-white">
    <!--                    <i class="mdui-icon material-icons">phone</i>-->
                        <label>摄影展</label>
                    </a>
                    <a href="#example7-tab2" class="mdui-ripple mdui-ripple-white">
                        <i class="mdui-icon material-icons">favorite</i>
                        <label>接口管理系统</label>
                    </a>
            </div>
    </div>
</div>

<!-- 在超小屏幕设备上，第一列 100% 宽度，第二列 50% 宽度。在小屏幕及以上设备上，第一列为 66.6% 宽度，第二列为 33.3% 宽度。 -->
<div class="mdui-row" style="top: 30px">
    <div class="mdui-col-xs-2"></div>
    <div class="mdui-col-xs-8">
        <main>
                    <div class="mdui-card">
                        <div class="mdui-card-media">
                            <img src="./img/1.jpg"/>
                        </div>
                        <div class="mdui-card-actions mdui-card-actions-stacked">
                            <p>221312213213dhaubghaubg</p>
                        </div>
                    </div>
                    <div class="mdui-card">
                        <div class="mdui-card-media">
                            <img src="./img/2.jpeg"/>
                        </div>
                        <div class="mdui-card-actions mdui-card-actions-stacked">
                            <p>221312213213dhaubghaubg</p>
                        </div>
                    </div>
                    <div class="mdui-card">
                        <div class="mdui-card-media">
                            <img src="./img/3.jpg"/>
                        </div>
                        <div class="mdui-card-actions mdui-card-actions-stacked">
                            <p>221312213213dhaubghaubg</p>
                        </div>
                    </div>
                    <div class="mdui-card">
                        <div class="mdui-card-media">
                            <img src="./img/4.jpg"/>
                        </div>
                        <div class="mdui-card-actions mdui-card-actions-stacked">
                            <p>221312213213dhaubghaubg</p>
                        </div>
                    </div>
                    <div class="mdui-card">
                        <div class="mdui-card-media">
                            <img src="./img/5.jpg"/>
                        </div>
                        <div class="mdui-card-actions mdui-card-actions-stacked">
                            <p>221312213213dhaubghaubg</p>
                        </div>
                    </div>
                    <div class="mdui-card">
                        <div class="mdui-card-media">
                            <img src="./img/6.jpg"/>
                        </div>
                        <div class="mdui-card-actions mdui-card-actions-stacked">
                            <p>221312213213dhaubghaubg</p>
                        </div>
                    </div>
                    <div class="mdui-card">
                        <div class="mdui-card-media">
                            <img src="./img/6.jpg"/>
                        </div>
                        <div class="mdui-card-actions mdui-card-actions-stacked">
                            <p>221312213213dhaubghaubg</p>
                        </div>
                    </div>
                    <div class="mdui-card">
                        <div class="mdui-card-media">
                            <img src="./img/7.jpg"/>
                        </div>
                        <div class="mdui-card-actions mdui-card-actions-stacked">
                            <p>221312213213dhaubghaubg</p>
                        </div>
                    </div>
            </div>
        </main>
    </div>
    <div class="mdui-col-xs-2"></div>
</div>


</body>
</html>
